<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">

	<head>
		<title>Apple (中国) - 官方网站</title>

		<meta charset="utf-8">
		<!--[if IE]><meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'><![endif]-->
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta name="description" content="">

		<!-- Google Fonts -->
		<link href='https://fonts.googleapis.com/css?family=Karla:400,400i,700%7CLato:300,400,400i,700' rel='stylesheet'>

		<!-- Css -->
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<link rel="stylesheet" href="css/magnific-popup.css" />
		<link rel="stylesheet" href="css/font-icons.css" />
		<link rel="stylesheet" href="css/sliders.css" />
		<link rel="stylesheet" href="css/style.css" />

		<!-- Favicons -->
		<link rel="shortcut icon" href="img/favicon.ico">
		<link rel="apple-touch-icon" href="img/apple-touch-icon.png">
		<link rel="apple-touch-icon" sizes="72x72" href="img/apple-touch-icon-72x72.png">
		<link rel="apple-touch-icon" sizes="114x114" href="img/apple-touch-icon-114x114.png">

	</head>

	<body>

		<!-- Preloader -->
		<div class="loader-mask">
			<div class="loader">
				"Loading..."
			</div>
		</div>

		<main class="main-wrapper">

			<!-- Navigation -->
			<header class="nav nav--transparent">

				<div class="nav__holder" id="sticky-nav">
					<div class="container-fluid">
						<div class="flex-parent">

							<div class="nav__header flex-child clearfix">
								<!-- Logo -->
								<div class="logo-wrap">
									<a href="index.html" class="logo__link">
										<img class="logo logo--dark" src="img/logo_dark.png" alt="logo">
										<img class="logo logo--light" src="img/logo_light.png" alt="logo">
									</a>
								</div>

								<button type="button" class="nav__icon-toggle" id="nav__icon-toggle" data-toggle="collapse" data-target="#navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="nav__icon-toggle-bar"></span>
                <span class="nav__icon-toggle-bar"></span>
                <span class="nav__icon-toggle-bar"></span>
              </button>
							</div>
							<!-- end nav-header -->

							<nav id="navbar-collapse" class="nav__wrap flex-child collapse navbar-collapse">
								<ul class="nav__menu">

									<li class="nav__dropdown flex-child active">
										<a href="#">Mac</a>
										<i class="ui-arrow-down nav__dropdown-trigger"></i>
										<ul class="nav__dropdown-menu">
											<li>
												<a href="index.html">MacBook</a>
											</li>
											<!-- 跳转MacBook页面 -->
											<li>
												<a href="index-2.html">MacBook Air</a>
											</li>
											<!-- 跳转MacBook Air页面 -->
											<li>
												<a href="index-3.html">MacBook Pro</a>
											</li>
											<!-- 跳转MacBook Pro页面 -->
										</ul>
									</li>

									<li class="nav__dropdown flex-child">
										<a href="#">iPad</a>
										<i class="ui-arrow-down nav__dropdown-trigger"></i>
										<ul class="nav__dropdown-menu">
											<li>
												<a href="portfolio-classic.html">iPad</a>
												<!-- 跳转iPad页面 -->
											</li>
											<li>
												<a href="portfolio-masonry.html">iPad Pro</a>
												<!-- 跳转iPad Pro页面 -->
											</li>
											<li>
												<a href="portfolio-single.html">iPad Mini</a>
												<!-- 跳转iPad Mini页面 -->
											</li>
										</ul>
									</li>

									<li class="nav__dropdown flex-child">
										<a href="#">iPhone</a>
										<i class="ui-arrow-down nav__dropdown-trigger"></i>
										<ul class="nav__dropdown-menu">
											<li>
												<a href="blog-standard.html">iPhoneXs</a>
											</li>
											<!-- 跳转iPhoneXs页面 -->
											<li>
												<a href="blog-single.html">iPhoneXR</a>
											</li>
											<!-- 跳转iPhoneXR页面 -->
											<li>
												<a href="blog-single.html">iPhone8</a>
											</li>
											<!-- 跳转iPhone8页面 -->
											<li>
												<a href="blog-single.html">iPhone7</a>
											</li>
											<!-- 跳转iPhone7页面 -->
										</ul>
									</li>

									<li class="nav__dropdown flex-child">
										<a href="#">技术支持</a>
										<i class="ui-arrow-down nav__dropdown-trigger"></i>
										<ul class="nav__dropdown-menu">
											 <li><a href="https://support.apple.com/zh-cn" target="_blank">访问技术支持部门</a></li>
										</ul>
									</li>

									<li class="nav__dropdown flex-child">
										<a href="#">暂定</a>
										<i class="ui-arrow-down nav__dropdown-trigger"></i>
										<ul class="nav__dropdown-menu">
											<li>
												<a href="typography.html">暂定</a>
											</li>
											<li>
												<a href="shortcodes.html">暂定</a>
											</li>
										</ul>
									</li>
									<!-- end elements -->

								</ul>
								<!-- end menu -->
							</nav>
							<!-- end nav-wrap -->

						</div>
						<!-- end flex-parent -->
					</div>
					<!-- end container -->

				</div>
			</header>
			<!-- end navigation -->

			<div class="content-wrapper oh">

				<!-- Page Title -->
				<section class="page-title bg-img text-center" style="background-image: url(img/MacBookAir2.jpg);">
					<div class="container">
						<div class="page-title__holder">
							<div class="page-title__inner">
								<h5 class="page-title__title" align="center">MacBook</h5>
								<h1 class="page-title__title">身薄力不薄。</h1>
								<div>

									<a href="#" class="btn btn--lg btn--transparent"><span>进一步了解></span></a>

								</div>

								<a href="#" class="btn btn--lg btn--transparent"><span>购买></span></a>

							</div>

						</div>
					</div>
				</section>
				<!-- end page title -->

				<!-- Portfolio Classic -->

				<!-- end work-item -->

			</div>
			</div>
			</section>
			<!-- end portfolio masonry -->

			<!-- Footer -->
			<footer class="footer bg-dark">
				<div class="container">
					<div class="footer__widgets">
						<div class="row">

							<div class="col-md-4 col-sm-6 col-xs-12">
								<div class="widget footer__get-in-touch text-sm-center">
									<div class="footer__logo">
										<img src="img/logo_light.png" alt="">
									</div>
									<p class="footer__get-in-touch__paragraph">
										<a href="https://www.apple.com/cn/" target="_blank">苹果 - 中国</a>
                  </p>
                  <p class="footer__get-in-touch__paragraph"><a href="tel:+64-93-310-70-50">致电：400-666-8800 </a><br>Copyright © 2019 Apple Inc. 保留所有权利。 
				  <br><a href="#">京公安网安备 11010502008968</a></p>
				  <br><a href="#">京ICP备10214630 营业执照</a></p>
								</div>
							</div>
							<!-- end get in touch -->

							<div class="col-md-6 col-md-offset-2 col-sm-6 col-xs-12">
								<div class="widget footer__nav-links text-right text-sm-center">
									<ul class="list-inline">
										<li><a href="https://www.apple.com/legal/privacy/szh/" target="_blank">隐私政策</a></li>
                    <li><a href="https://www.apple.com/cn/legal/internet-services/terms/site.html" target="_blank">使用条款</a></li>
                    <li><a href="https://www.apple.com/cn/shop/browse/open/salespolicies" target="_blank">销售政策</a></li>
                    <li><a href="https://www.apple.com/cn/legal/" target="_blank">法律信息</a></li>
                    <li><a href="https://www.apple.com/cn/sitemap/" target="_blank">网站地图</a></li>
									</ul>

									<div class="footer__socials mt-50">
										<div class="social-icons social-icons--nobase">
											<a href="#"><i class="ui-twitter"></i></a>
											<a href="#"><i class="ui-facebook"></i></a>
											<a href="#"><i class="ui-linkedin"></i></a>
											<a href="#"><i class="ui-instagram"></i></a>
										</div>
									</div>

								</div>
							</div>
							<!-- end nav links / socials -->

						</div>
					</div>
				</div>
			</footer>
			<!-- end footer -->

			<div id="back-to-top">
				<a href="#top"><i class="ui-arrow-up"></i></a>
			</div>

			</div>
			<!-- end content wrapper -->
		</main>
		<!-- end main wrapper -->

		<!-- jQuery Scripts -->
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/bootstrap.min.js"></script>
		<script type="text/javascript" src="js/plugins.js"></script>
		<script type="text/javascript" src="js/scripts.js"></script>

	</body>

</html>